<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
    <script src="../../build/aui/aui.js"></script>
</head>
<body class="yui3-skin-sam">
    <h1>AlloyUI - Datatable</h1>
    <div id="simple" class="table-striped"></div>
    <script>
    YUI({ filter: 'raw' }).use('aui-datatable', 'aui-aria', 'aui-aria-table-sortable', 'datatable-scroll', function(Y) {

        var data = [
            { name: 'Joan B. Jones', address: '3271 Another Ave', city: 'New York', state: 'AL', amount: 3, active: 'no', colors: ['red','blue'], fruit: ['apple'], date: '2013-01-01' },
            { name: 'Bob C. Uncle', address: '9996 Random Road', city: 'Los Angeles', state: 'CA', amount: 0, active: 'maybe', colors: ['green'], fruit: ['cherry'], date: '2013-01-01' },
            { name: 'John D. Smith', address: '1623 Some Street', city: 'San Francisco', state: 'CA', amount: 5, active: 'yes', colors: ['red'], fruit: ['cherry'], date: '' },
            { name: 'Joan E. Jones', address: '3217 Another Ave', city: 'New York', state: 'KY', amount: 3, active: 'no', colors: ['red','blue'], fruit: ['apple','cherry'], date: '2013-01-06' }
        ];

        var dataTable = new Y.DataTable({
            cssClass: 'table-striped',
            boundingBox: '#simple',
            columns: [
                {
                    key: 'name',
                    sortable: true,
                    editor: new Y.TextAreaCellEditor({
                        on: {
                            save: function(event) {
                                Y.log('save', event.newVal);
                            },
                            cancel: function(event) {
                                Y.log('cancel', event);
                            }
                        },
                        validator: {
                            rules: {
                                value: {
                                    required: true
                                }
                            }
                        }
                    })
                },
                {
                    key: 'address',
                    editor: new Y.TextAreaCellEditor()
                },
                {
                    key: 'city',
                    editor: new Y.TextAreaCellEditor()
                },
                {
                    key: 'state',
                    editor: new Y.DropDownCellEditor({
                        editable: true,
                        options: ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA"]
                    })
                },
                'amount',
                {
                    key:"active",
                    editor: new Y.RadioCellEditor({
                        editable: true,
                        options: {
                            yes: 'Yes',
                            no: 'No',
                            maybe: 'Maybe'
                        }
                    })
                },
                {
                    key:"colors",
                    editor: new Y.CheckboxCellEditor({
                        editable: true,
                        multiple: true,
                        options: {
                            red: 'Red',
                            green: 'Green',
                            blue: 'Blue'
                        }
                    })
                },
                {
                    key: 'fruit',
                    sortable: true,
                    editor: new Y.DropDownCellEditor({
                        editable: true,
                        multiple: true,
                        options: {
                            apple: 'Apple',
                            cherry: 'Cherry',
                            banana: 'Banana',
                            kiwi: 'Kiwi'
                        }
                    })
                },
                {
                    key: 'date',
                    sortable: true,
                    editor: new Y.DateCellEditor({
                        calendar: {
                            width:'400px',
                            showPrevMonth: true,
                            showNextMonth: true,
                            selectionMode: 'multiple'
                        }
                    })
                }
            ],
            data: data,
            editEvent: Y.UA.touchEnabled ? 'click' : 'dblclick',
            plugins: [
                {
                    fn: Y.Plugin.DataTableHighlight,
                    cfg: {
                        // highlightRange: false,
                        // type: 'rows',
                        // activeBorderWidth: 5,
                        // rangeBorderWidth: 1
                    }
                }
            ],
            scrollable: 'x',
            width: '100%'
        }).render();

        dataTable.plug(Y.Plugin.Aria, {
            tableNode: dataTable._tableNode
        });
    });
    </script>
</body>
</html>